<template>
<!--  <div>欢迎:{{this.$route.query.Sname}}报名选课</div>-->
  <div align="center" style="margin-top: 200px">
    <el-card style="width: 600px">
      <el-form style="width: 70%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学生编号:" prop="Sno">
          <el-input v-model="ruleForm.Sno"></el-input>
        </el-form-item>
        <el-form-item label="科目编号:" prop="Cno">
          <el-input v-model="ruleForm.Cno"></el-input>
        </el-form-item>
        <el-form-item label="科目名:" prop="Cname">
          <el-input v-model="ruleForm.Cname"></el-input>
        </el-form-item>
        <el-form-item label="费用:" prop="Cpayment">
          <el-input v-model="ruleForm.Cpayment"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pay('ruleForm')">支付</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Pay",
  data() {
    return {
      ruleForm : {
        Cno:'',
        Sno:'',
        Cpayment:'',
        Cname:'',
      }
    }
  },
  created(){
    this.Cno = this.$route.query.Cno;
    this.Sname = this.$route.query.Sname;
    console.log(this.$route.query.Cno);
    this.axios.post('http://localhost:8152/api/auth/course/pay',{Cno:this.Cno,Sname:this.$route.query.Sname}).then((res) => {
      console.log(res.data),
     this.ruleForm = res.data
    })
  },
  methods: {
    pay() {
      // alert(123);
      this.axios.post('http://localhost:8152/api/auth/course/payresult',{...this.ruleForm}).then((res) => {
        console.log(res);
        if(res.data.msg == '支付成功'){
          alert("缴费成功");
          this.$router.push({path:'/chooseCourse',query:{
            sname : this.Sname
            }});
        }else{
          alert("余额不足");
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
